<blockquote class="layui-elem-quote">

    <div class="layui-collapse" lay-filter="newRoomType">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">新建房间类型</h2>
            <div class="layui-colla-content">
                <form class="layui-form" lay-filter="aaa" #roomTypeListForm="ngForm">
                    <div class="layui-form-item">
                        <div class="layui-form-inline">
                            <label class="layui-form-label">名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入房间类型名称" autocomplete="off" class="layui-input" [(ngModel)]="roomType.name">
                            </div>
                        </div>

                        <div class="layui-form-inline">
                            <label class="layui-form-label">长度</label>
                            <div class="layui-input-inline">
                                <input type="text" name="length" required lay-verify="required|number" placeholder="请输入房间长度" autocomplete="off" class="layui-input" [(ngModel)]="roomType.langth">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-form-inline">
                            <label class="layui-form-label">宽度</label>
                            <div class="layui-input-inline">
                                <input type="text" name="width" required lay-verify="required|number" placeholder="请输入房间宽度" autocomplete="off" class="layui-input" [(ngModel)]="roomType.width">
                            </div>
                        </div>

                        <div class="layui-form-inline">
                            <label class="layui-form-label">窗户数量</label>
                            <div class="layui-input-inline">
                                <input type="text" name="numwin" required lay-verify="required|number" placeholder="请输入窗户数量" autocomplete="off" class="layui-input" [(ngModel)]="roomType.numWin">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-form-inline">
                            <label class="layui-form-label">双人床数量</label>
                            <div class="layui-input-inline">
                                <input type="text" name="numdou" required lay-verify="required|number" placeholder="请输入双人床数量" autocomplete="off" class="layui-input" [(ngModel)]="roomType.numDoubleBed">
                            </div>
                        </div>

                        <div class="layui-form-inline">
                            <label class="layui-form-label">单人床数量</label>
                            <div class="layui-input-inline">
                                <input type="text" name="numsin" required lay-verify="required|number" placeholder="请输入单人床数量" autocomplete="off" class="layui-input" [(ngModel)]="roomType.numSingleBed">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">价格</label>
                        <div class="layui-input-inline">
                            <input type="text" name="price" required lay-verify="required|number" placeholder="请输入价格" autocomplete="off" class="layui-input" [(ngModel)]="roomType.price">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">电视</label>
                        <div class="layui-input-inline">
                            <input type="text" name="haveTV" required lay-verify="required" placeholder="有/无" autocomplete="off" class="layui-input" [(ngModel)]="roomType.haveTV">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">冰箱</label>
                        <div class="layui-input-inline">
                            <input type="text" name="haveRef" required lay-verify="required" placeholder="有/无" autocomplete="off" class="layui-input" [(ngModel)]="roomType.haveRef">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">空调</label>
                        <div class="layui-input-inline">
                            <input type="text" name="haveAirc" required lay-verify="required" placeholder="有/无" autocomplete="off" class="layui-input" [(ngModel)]="roomType.haveAirc">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo" (click)="createRoomType()">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</blockquote>

<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
        <tr>
            <th>编号</th>
            <th>房间类型</th>
            <th>单人床数量</th>
            <th>双人床数量</th>
            <th>价格</th>
            <th>相关操作</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let roomType of roomTypes">
            <td>{{roomType.id}}</td>
            <td>{{roomType.name}}</td>
            <td>{{roomType.numSingleBed}}</td>
            <td>{{roomType.numDoubleBed}}</td>
            <td>{{roomType.price}}</td>
            <td>
                <a class="layui-btn layui-btn-xs" lay-event="edit" (click)="onSelect(roomType)">详细信息</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" (click)="deleteRoomType(roomType)">删除</a>
            </td>
        </tr>
    </tbody>
</table>